import React, { FC } from 'react';
import Particles from 'react-tsparticles';
import { Options, FormConfig } from './config';
import { Form, Button, Input } from 'antd';
import _ from 'lodash';
import { UserOutlined, KeyOutlined } from '@ant-design/icons';
import logo from '@/assets/images/log.jpg';
import { RouteComponentProps, useHistory } from 'react-router-dom';

const { Password } = Input;

interface CompsProps {
  [projectName: string]: any;
}

interface LoginProps {
  setIsLogin: Function;
}

const Components: CompsProps = {
  Input,
  Password,
};

const PrefixComponents: CompsProps = {
  UserOutlined,
  KeyOutlined,
};

const Particles_: any = Particles;

const Login: FC<LoginProps> = ({ setIsLogin }) => {
  const history = useHistory();
  const onFinish: (values: { username: string }) => void = (values) => {
    window.sessionStorage.setItem('username', values.username);
    setIsLogin(true);
    history.push('/');
  };
  return (
    <>
      <Particles_ id="tsparticles" options={Options}></Particles_>
      <div className="login">
        <Form name="Login" onFinish={onFinish}>
          <div className="logo-title">
            Daily Learning
            <img src={logo} />
          </div>
          {_.map(FormConfig, (item, key) => {
            const Component = item.component ? Components[item.component] : '';
            const PrefixComponent = item.prefix
              ? PrefixComponents[item.prefix]
              : '';

            return (
              <div key={item.id}>
                <Form.Item name={item.name} rules={item.rules} {...item.props}>
                  <Component
                    placeholder={item.placeholder}
                    {...item.componentProps}
                    prefix={<PrefixComponent />}
                    size="large"
                  />
                </Form.Item>
              </div>
            );
          })}
          <Form.Item>
            <Button className="login-submit" type="primary" htmlType="submit">
              立 即 登 录
            </Button>
          </Form.Item>
        </Form>
      </div>
    </>
  );
};

export default Login;
